<template>
    <div class="page"  >
        
        <div id="newlogin" class="main bgfff login w100">
            <div id="popup-captcha"></div>
            <div class="pop rela">
                <div class="head-top">
                    <div class="icon-left-open-big backico">
                        <img src="../assets/img/lefticon.png" width="12px" @click="clickHandler()">
                    </div>
                </div>
                <div class="padmain rela">
                    <p class="bold c333 ft20 mt10 mb10 delay1 animated bounceInRight">短信验证码登录</p>
                    <div class="rela">
                        <input id="username" tel="text" placeholder="用户名/手机号/邮箱号" v-model="usn" class="inputStyle block mb10 delay2 animated bounceInRight">
                        <div class="rela delay4 animated bounceInRight" >
                            <input id="password" name="formhash" type="password" placeholder="验证码" maxlength="20" v-if="show" v-model="usp" class="inputStyle block mb10">
                            <input id="password" name="formhash" type="text" placeholder="请输入密码" maxlength="20" v-else v-model="usp" class="inputStyle block mb10">
                                <div class="abs righta" >
                                    <!-- 密码显示隐藏方法一： -->
                                    <a class="close-eye1 psdtype1 dib" v-if="show"  @click="changestate()"></a>
                                    <a class="open-eye1 psdtype1 dib" v-else  ></a>
                                    <!-- 密码显示隐藏方法二： -->
                                    <!-- <a class="close-eye1 psdtype1 dib" :style="{backgroundPosition:show?'-5px 0':'-5px -26px'}"  @click="changestate()"></a> -->
                                    <a class="ft10 c333 forget dib" >忘记密码</a>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button :disabled="btnState==false" :class="{greenbtn:btnState}" @click=changeHandler()>登录</button>
                    </div>
                    <p class="ft12 c333 mt15 delay5 animated bounceInRight overflow">
                        <router-link tag="a" to="/register" active-class="active" href="javascript:void(0);" class="fr">新用户注册</router-link>
                    </p>
                </div>
                <div class="bottom-text padmain delay5 animated bounceInRight" style="margin-top:100px;">
                    <img src="../assets/img/line.png" class="w100">
                    <div class="loginther flex flex-pc mt20 mb20">
                        <a class="goQqLogin">
                            <img src="../assets/img/QQ.png">
                        </a>
                        <a class="goAliLogin">
                            <img src="../assets/img/zhi.png">
                        </a>
                    </div>
                    <p class="ft10 ftc c333 mb15">
                        <span>登录代表您阅读并同意</span>
                        <a class="cf0">《E宠商城用户协议》</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
    return{
      show:true,
      usn:"",
      usp:""
      
  }},
    methods:{
        clickHandler(){
            this.$router.back(-1);
        },
        changestate(){
            this.show=!this.show
            
        },
        
},
computed:{
    btnState(){
        return this.usp!==""&&this.usn!==""
    }
}
}
</script>
<style lang="stylus" scoped>
.page
    height 100%
    overflow auto
.bgfff {
    background: #fff;
}
.w100 {
    width: 100%;
}
.main {
    max-width: 6.4rem;
    margin: auto;
}
.rela {
    position: relative;
}

.head-top {
    height: 0.5rem;
    line-height: 0.5rem;
    position: relative;
    padding: 0 0.1rem;
    border: 0;
}
.backico {
    font-size: 0.22rem;
    height: 0.4rem;
    color: #999;
    padding-left: 0.15rem;
    padding-top: 0.2rem;
}
[class^=icon-], [class*=" icon-"] {
    font-family: icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.padmain {
    padding: 0.1rem 0.4rem;
}
.animated {
    animation-duration: .7s;
}
.delay1 {
    animation-delay: .1s;
}
.c333 {
    color: #333;
}
.ft20 {
    font-size: 0.2rem;
}
.mb10, .mb {
    margin-bottom: 0.1rem;
}
.mt10, .mt {
    margin-top: 0.1rem;
}
.bold {
    font-weight: 700;
}
input.inputStyle {
   
    width: 114%;
    border: 0;
    padding: 0.27rem 0;
    border-bottom: 1px solid #d0d0d0;
    height: 0.34rem;
    outline: 0;
    margin-left: -0.21rem;
    margin-bottom: 0.06rem;
}
.animated {
    animation-duration: .7s;
}
.delay2 {
    animation-delay: .2s;
}
.block, .db {
    display: block;
}

input {
    font-size: 0.16rem!important;
   
}
.animated {
    animation-duration: .7s;
}
.delay4 {
    animation-delay: .4s;
}
.bottom10 {
    bottom: 0.13rem;
}
.righta {
    right: 0;
    bottom: 0;
}
.abs {
    position: absolute;
}
.getCode {
    padding: 0.04rem 0.1rem;
    border-radius: 0.5rem;
    border: solid 0.01rem #41C856;
    right: 0;
    bottom: 0.13rem;
    color: #41C856;
}
.ft10 {
    font-size: 0.12rem;
}
.delay5 {
    animation-delay: .5s;
}
button {
    background: #f0f0f0;
    color: #bfbfbf;
    width: 100%;
    line-height: 0.5rem;
    margin-top: 0.37rem;
    animation-duration: .7s;
    animation-delay: .5s;
    border-radius: 0.3rem;
    display: block;
    font-size: 0.16rem;
    text-align: center;
    border:none;
}
.greenbtn{
    background: #41C856;
    color: #fff;
    width: 100%;
    line-height: 0.5rem;
    margin-top: 0.37rem;
    animation-duration: .7s;
    animation-delay: .5s;
    border-radius: 0.3rem;
    display: block;
    font-size: 0.16rem;
    text-align: center;
}
.round30 {
    border-radius: 0.3rem;
}
.ft16 {
    font-size: 0.16rem;
}
.ftc {
    text-align: center;
}
.c333 {
    color: #333;
}
.ft12 {
    font-size: 0.12rem;
}
.mt15 {
    margin-top: 0.15rem;
}
.overflow {
    overflow: hidden!important;
}
.fl{
    float:left;
}
.fr{
    float right
}
.padmain {
    padding: 0.1rem 0.4rem;
}
.flex
    display flex
.flex-pc
    -webkit-box-pack: center;
    justify-content: center;
.mb20 {
    margin-bottom: 0.2rem;
}
.mt20 {
    margin-top: 0.2rem;
}
.loginther a {
    width: 50%;
    text-align: center;
}
.loginther img {
    width: 0.3rem;
    height: 100%;
    margin: 0 auto;
}
.mb15 {
    margin-bottom: 0.15rem;
}
.cf0 {
    color: #FF5757;
}
.bottom10 {
    bottom: 0.13rem;
}
.righta {
    right: 0;
    bottom: 0;
}
.abs {
    position: absolute;
}
.close-eye1 {
    width: 0.28rem;
    height: 0.18rem;
    background: url('../assets/img/eye.png');
    background-size: 0.4rem 2rem;
    background-position: -0.05rem 0;
    vertical-align: bottom;
    margin-bottom: 0.2rem;
}
.dib {
    display: inline-block;
}
.forget {
    right: 0;
    margin-bottom: 0.18rem;
    border-left: 0.01rem solid #d7d7d7;
    font-size: 0.1rem;
    padding-left: 0.15rem;
}
.c333 {
    color: #333;
}
.open-eye1 {
    width: 0.28rem;
    height: 0.18rem;
    background: url('../assets/img/eye.png');
    background-size: 0.4rem 2rem;
    background-position: -0.05rem -0.26rem;
    vertical-align: bottom;
    margin-bottom: 0.2rem;
}
</style>